<template>
  <div>
    <!--  头部  -->
    <header>
      <nav-top :classId="null"></nav-top>
    </header>
    <!--   主体界面   -->
    <section>
      <div class="main" v-for="(u_item, u_index) in people_item" :key="u_index">
        <!--    个人界面    -->
        <div class="content">
          <div class="user-info">
            <img :src="u_item.avatar_src" alt="" />
            <div class="info-more">
              <div>
                <h2>{{ u_item.user_name }}</h2>
                <span>{{ u_item.user_office }}</span>
              </div>
              <div>
                <div>
                  <span>关注了</span>
                  <span>{{ u_item.user_follow }}</span>
                </div>
                <el-divider class="streak" direction="vertical"></el-divider>
                <div>
                  <span>关注者</span>
                  <span>{{ u_item.user_fans }}</span>
                </div>
              </div>
            </div>
            <p class="look-info">
              查看详细资料<i class="el-icon-arrow-down"></i>
            </p>
          </div>
          <div class="user-nav">
            <div
              class="nav-tab"
              v-for="(p_item, p_index) in user_nav"
              :key="p_index"
              @click="chengActive(p_index)"
              :class="{ active: is_active === p_index }"
            >
              {{ p_item }}
            </div>
            <div class="user-operating">
              <button class="btn-follow">
                <i class="el-icon-plus"></i>关注他
              </button>
              <button class="btn-send">
                <i class="el-icon-chat-line-round"></i>发私信
              </button>
            </div>
          </div>
          <div class="moving-item" v-if="is_active === 0">
            <div
              class="item"
              v-for="(item, content_index) in items"
              :key="content_index"
            >
              <div class="user-history">
                <span>点赞了回答（1356人也点赞了该回答）</span>
                <span>10天前</span>
              </div>
              <router-link to="/articleInfo">
                <h3 @click="showContent(content_index)">{{ item.title }}</h3>
              </router-link>
              <div class="content-items">
                <div class="user-info-card">
                  <img :src="item.avatar" alt="" />
                  <span>{{ item.name }}，</span>
                  <span>{{ item.state }}</span>
                </div>
                <el-row :gutter="20">
                  <el-col :span="item.colNum">
                    <div class="main-content">
                      <div @click="showContent(content_index)">
                        {{ item.isShow ? item.content : item.countNew }}
                        <!--<button v-show="!item.isShow" @click="showContent(index)">阅读全文<i class="el-icon-arrow-down"></i></button>-->
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="item.colRightNum" v-if="item.imgSrc">
                    <div class="is-video">
                      <img
                        @click="showContent(content_index)"
                        :src="item.imgSrc"
                        alt=""
                      />
                      <span
                        class="article-content"
                        v-show="item.isShow"
                        v-html="item.articleContent"
                      ></span>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="item-operating">
                <div @click="changeLike(content_index)">
                  <i
                    class="icon"
                    :class="[item.isLike ? 'icon-liked' : 'icon-like']"
                  ></i
                  >{{ item.likeNump }}
                </div>
                <div @click="showComment(content_index)">
                  <i class="icon icon-comment"></i>
                  {{
                    item.isComment ? "收起评论" : item.comment_num + "条评论"
                  }}
                </div>
                <div @click="toggleShare(content_index)">
                  <i class="icon icon-share"></i>分享
                </div>
                <div><i class="icon icon-collection"></i>收藏</div>
                <div><i class="icon icon-dislike"></i>踩</div>
                <div @click="toggleMore(content_index)">
                  <i class="el-icon-more"></i>
                </div>
                <div
                  class="hide-content"
                  @click="hideContent(content_index)"
                  v-show="item.isShow"
                >
                  收起<i class="el-icon-arrow-up"></i>
                </div>
              </div>
              <div class="comment-cover" v-show="item.isComment">
                <div class="comment-title">
                  <h4>{{ item.comment_num }} 条评论</h4>
                  <p>
                    <i class="icon-ctime"></i>
                    切换为时间排序
                  </p>
                </div>
                <div
                  class="comment-content"
                  v-for="(content_item,
                  comment_index) in item.comment_content.slice(
                    item.pageStart,
                    item.pageCount
                  )"
                  :key="comment_index"
                >
                  <div>
                    <div>
                      <img :src="content_item.img_src" alt="" />
                      <span>{{ content_item.user_name }}</span>
                    </div>
                    <span>4个月前</span>
                  </div>
                  <div>
                    <p>
                      {{ content_item.content }}
                    </p>
                    <p>
                      <i class="icon-like"></i>
                      {{ content_item.comment_like }}
                    </p>
                  </div>
                  <div
                    class="reply-comment"
                    v-for="(child_comment,
                    child_index) in content_item.child_comment_content"
                    :key="child_index"
                  >
                    <div class="child-reply-title">
                      <div>
                        <img :src="child_comment.child_img_src" alt="" />
                        <span>
                          {{ child_comment.child_user_name }}
                        </span>
                        <span>回复</span>
                        <span>
                          {{ content_item.user_name }}
                        </span>
                      </div>
                      <span>4个月前</span>
                    </div>
                    <div class="content-info">
                      <p>{{ child_comment.child_content }}</p>
                      <i class="icon-like"></i>
                      <span>{{ child_comment.child_comment_like }}</span>
                    </div>
                  </div>
                </div>
                <div class="comment-pagination">
                  <el-pagination
                    :page-size="2"
                    :pager-count="5"
                    @current-change="handleCurrentChange"
                    @prev-click="afterPage(content_index)"
                    @next-click="nextPage(content_index)"
                    layout="prev, pager, next"
                    prev-text="上一页"
                    next-text="下一页"
                    :total="item.comment_content.length"
                  >
                  </el-pagination>
                </div>
              </div>
              <div class="cover">
                <transition name="fade">
                  <div class="cover-share" v-show="item.isShare">
                    <div
                      class="copy-share-link"
                      @click="copy_link(content_index)"
                      data-clipboard-action="copy"
                      :data-clipboard-text="item.title"
                    >
                      <img
                        src="../assets/images/copy-link.png"
                        alt=""
                      />复制链接
                    </div>
                    <div>
                      <img src="../assets/images/weibo.png" alt="" />新浪微博
                    </div>
                    <div>
                      <img src="../assets/images/wechat.png" alt="" />微信扫一扫
                    </div>
                    <img src="../assets/images/wechatQR.png" alt="" />
                  </div>
                </transition>
                <transition name="fade">
                  <div class="cover-more" v-show="item.isMore">
                    <p>没有帮助</p>
                    <p>举报</p>
                  </div>
                </transition>
              </div>
            </div>
          </div>
          <div class="moving-item" v-if="is_active === 1">1</div>
          <div class="moving-item" v-if="is_active === 2">2</div>
          <div class="moving-item" v-if="is_active === 3">3</div>
          <div class="moving-item" v-if="is_active === 4">4</div>
        </div>
        <div class="user-right">
          <div class="user-item">
            <div><i class="icon-badge"></i>个人榜单</div>
            <p>
              贡献的回答<span>{{ u_item.user_answer_num }}</span>
            </p>
            <p>
              贡献的提问<span>{{ u_item.user_question_num }}</span>
            </p>
            <p>
              贡献的文章<span>{{ u_item.user_article_num }}</span>
            </p>
            <p>
              贡献的阅读<span>{{ u_item.user_read_num }}</span>
            </p>
            <p>
              贡献的点赞<span>{{ u_item.user_like_num }}</span>
            </p>
            <p>
              贡献的收藏<span>{{ u_item.user_collection_num }}</span>
            </p>
            <p>
              贡献的转发<span>{{ u_item.user_forward_num }}</span>
            </p>
          </div>
          <div class="trademark">
            <p>个人主页被浏览 55 次</p>
            <p>
              Copyright©2019 Lawpro<br />
              沪ICP备19012546号
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "people",
  data() {
    return {
      activeName: "moving",
      user_nav: ["动态", "回答", "提问", "文章", "更多"],
      is_active: 0,
      people_item: [
        {
          avatar_src: require("../assets/images/avatar(1).png"),
          user_name: "angel",
          user_office: "UI设计师",
          user_follow: 100,
          user_fans: 50,
          user_answer_num: 31,
          user_question_num: 10,
          user_article_num: 11,
          user_read_num: 5,
          user_like_num: 22,
          user_collection_num: 55,
          user_forward_num: 13
        }
      ],
      items: [
        {
          title:
            "如何看待正当防卫争议：丽江醉酒男午夜持刀砸门 90后女子带刀“反杀”?",
          avatar: require("../assets/images/user-avatar.png"),
          name: "巩大炮",
          state: "在校大学生",
          imgSrc: require("../assets/images/title-page.png"),
          isShow: false,
          content:
            "就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的。",
          countNew: "",
          articleContent:
            "有次我亏本做活动冲量。<br />20元的商品，报名<h1>9.9</h1>元活动。有个奇葩买了，并给我打了一个大大的差评，长篇大论。我说可以退换货，奇葩不退，胁迫说要我再发另外一个颜色的同款货品，免费送给她，这样才肯改。（敢情是觉得我产品好，要讹多一个啊）TNND，什么鬼人渣都有。这个奇葩还截图给我看她的订单。她一直在淘宝上薅羊毛，所的都是6元、3元、9元的小东西，也不知道讹了多少家店了。当时我还是新店，我也比较在意差评，因为她敲诈了我，我就向淘宝投诉举报了（不是每次都有用的，淘宝主要保护消费者）。同时拖着奇葩客户。叫她改差评，奇葩说，只要我发出了补发包裹，她就立刻改。也不肯吃这哑巴亏啊，发了一个空包。快递寄到要2-3天，奇葩又变脸了，说得收到货才能改。哼，这种人，讹到了东西，不知道又有什么新理由继续来讹。好在这次我走运，官方判我赢，删除了买家评价。奇葩看到评价被删除了，就到旺旺上辱骂我，说我删除差评，黑商家等等。但还在眼巴巴等着补发的包裹。我把她拉黑了，永不能购买。她还没完，到我的商品评价那里，一个客户回复一条，都是骂店铺、抹黑商品的。呵呵哒，这种垃圾货色，活该一辈子都只能买几块钱的东西！活该做一个穷鬼！经过这次心又更大了，改不掉的差评不那么在意了。天下奇葩一大堆，不必为之动气。消费者也是有眼睛有判断力的。",
          isLike: false,
          isComment: false,
          isShare: false,
          isMore: false,
          likeNum: 6194,
          colNum: 16,
          colRightNum: 8,
          likeNump: 0,
          pageStart: 0,
          pageCount: 2,
          comment_num: 876,
          comment_content: [
            {
              img_src: require("../assets/images/avatar(1).png"),
              user_name: "灯灯1",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/avatar(1).png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            },
            {
              img_src: require("../assets/images/user-avatar.png"),
              user_name: "灯灯2",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content:
                    "凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            },
            {
              img_src: require("../assets/images/user-avatar.png"),
              user_name: "灯灯3",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content:
                    "凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            }
          ]
        },
        {
          title:
            "如何看待正当防卫争议：丽江醉酒男午夜持刀砸门 90后女子带刀“反杀”?",
          avatar: require("../assets/images/user-avatar.png"),
          name: "巩大炮",
          state: "在校大学生",
          imgSrc: "",
          isShow: false,
          content:
            "就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的。",
          countNew: "",
          articleContent:
            "有次我亏本做活动冲量。20元的商品，报名9.9元活动。有个奇葩买了，并给我打了一个大大的差评，长篇大论。我说可以退换货，奇葩不退，胁迫说要我再发另外一个颜色的同款货品，免费送给她，这样才肯改。（敢情是觉得我产品好，要讹多一个啊）TNND，什么鬼人渣都有。这个奇葩还截图给我看她的订单。她一直在淘宝上薅羊毛，所的都是6元、3元、9元的小东西，也不知道讹了多少家店了。当时我还是新店，我也比较在意差评，因为她敲诈了我，我就向淘宝投诉举报了（不是每次都有用的，淘宝主要保护消费者）。同时拖着奇葩客户。叫她改差评，奇葩说，只要我发出了补发包裹，她就立刻改。也不肯吃这哑巴亏啊，发了一个空包。快递寄到要2-3天，奇葩又变脸了，说得收到货才能改。哼，这种人，讹到了东西，不知道又有什么新理由继续来讹。好在这次我走运，官方判我赢，删除了买家评价。奇葩看到评价被删除了，就到旺旺上辱骂我，说我删除差评，黑商家等等。但还在眼巴巴等着补发的包裹。我把她拉黑了，永不能购买。她还没完，到我的商品评价那里，一个客户回复一条，都是骂店铺、抹黑商品的。呵呵哒，这种垃圾货色，活该一辈子都只能买几块钱的东西！活该做一个穷鬼！经过这次心又更大了，改不掉的差评不那么在意了。天下奇葩一大堆，不必为之动气。消费者也是有眼睛有判断力的。",
          isLike: false,
          isComment: false,
          isShare: false,
          isMore: false,
          likeNum: 600,
          colNum: 16,
          colRightNum: 8,
          likeNump: 0,
          comment_num: 876,
          comment_content: [
            {
              img_src: require("../assets/images/user-avatar.png"),
              user_name: "灯灯",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content:
                    "凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            }
          ]
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.countWord();
  },
  methods: {
    // 选项卡
    chengActive(index) {
      this.is_active = index;
    },
    countWord: function() {
      let item = this.items;
      item.forEach(item => {
        item.countNew = item.content.slice(0, 100) + "...";
        //计算有无图片时的初始布局
        if (item.isShow || !item.imgSrc) {
          item.colNum = 24;
        } else {
          item.colNum = 16;
        }
        //计算点赞数
        if (item.likeNum > 9999) {
          item.likeNump = (item.likeNum / 10000).toFixed(2).slice(0, 2) + "万";
        } else if (item.likeNum > 999) {
          item.likeNump = (item.likeNum / 1000).toFixed(2).slice(0, 3) + "千";
        } else {
          item.likeNump = item.likeNum + "";
        }
      });
      this.items = item;
    },
    //显示布局
    showContent: function(index) {
      this.items[index].isShow = true;
      this.items[index].colNum = 24;
      this.items[index].colRightNum = 24;
      // console.log(this.items[index].colRightNum);
    },
    //收起
    hideContent: function(index) {
      console.log(this.items[index].isShow, this.items[index].imgSrc);
      this.items[index].isShow = false;
      if (this.items[index].isShow || !this.items[index].imgSrc) {
        this.items[index].colNum = 24;
      } else {
        this.items[index].colNum = 16;
        this.items[index].colRightNum = 8;
      }
    },
    //点赞
    changeLike(index) {
      this.items[index].isLike = !this.items[index].isLike;
      if (this.items[index].isLike) {
        this.items[index].likeNum++;
      } else {
        this.items[index].likeNum--;
      }
      this.countWord();
    },
    //评论
    showComment(index) {
      this.items[index].isComment = !this.items[index].isComment;
    },
    //更多
    toggleMore: function(index) {
      this.items[index].isMore = !this.items[index].isMore;
    },
    //分享
    toggleShare: function(index) {
      this.items[index].isShare = !this.items[index].isShare;
    },
    //复制链接
    copy_link(index) {
      this.$message({
        message: "复制链接成功！",
        iconClass: "none",
        center: true,
        customClass: "tip-class",
        duration: 2000,
        offset: 120
      });
      //复制链接
      let clipboard = new this.clipboard(".copy-share-link");
      clipboard.on("success", function() {
        console.log(1);
      });
      clipboard.on("error", function() {
        console.log(2);
      });
      this.items[index].isShare = !this.items[index].isShare;
    },
    // 页数
    handleCurrentChange(val) {
      console.log(val);
    },
    // 前一页
    afterPage(index) {
      this.items[index].pageStart = this.items[index].pageStart - 2;
      this.items[index].pageCount = this.items[index].pageCount - 2;
    },
    // 后一页
    nextPage(index) {
      this.items[index].pageStart = this.items[index].pageStart + 2;
      this.items[index].pageCount = this.items[index].pageCount + 2;
    }
  }
};
</script>

<style scoped lang="less">
header {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
}
section {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-top: 15px;
  margin-top: 55px;
  background-color: #f6f6f6;

  .main {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    .content {
      width: 69%;
      height: 100%;
      border-radius: 2px;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
      .user-info {
        display: flex;
        padding: 20px 15px;
        & > img {
          width: 80px;
          height: 80px;
          margin-right: 20px;
          cursor: pointer;
        }
        .info-more {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          & > div {
            display: flex;
            align-items: center;
          }
          & > div:first-child {
            h2 {
              margin-right: 30px;
            }
          }
          .streak {
            height: 30px;
            margin: 0 25px;
          }
          & > div:last-child {
            & > div {
              display: flex;
              flex-direction: column;
              text-align: center;
              span:first-child {
                font-size: 15px;
                color: #999;
              }
              span:last-child {
                font-size: 16px;
                color: #333;
              }
            }
          }
        }
        .look-info {
          height: 20px;
          margin-left: auto;
          font-size: 15px;
          color: #999;
        }
      }
      .user-nav {
        display: flex;
        align-items: center;
        border-bottom: 2px solid #f6f6f6;
        .nav-tab {
          position: relative;
          display: flex;
          align-items: center;
          margin: 15px 20px;
          font-size: 16px;
          color: #333;
          cursor: pointer;
        }
        .active {
          font-weight: bold;
          &:after {
            position: absolute;
            bottom: -15px;
            display: inline-block;
            width: 100%;
            content: "";
            border-bottom: 3px solid #6b9147;
          }
        }
        .user-operating {
          margin-left: auto;
          button {
            width: 90px;
            height: 30px;
            margin-right: 10px;
            border-radius: 3px;
            cursor: pointer;
          }
          .btn-follow {
            color: #fff;
            background-color: #6b9147;
            border: none;
          }
          .btn-send {
            color: #6b9147;
            border: 2px solid #6b9147;
            background-color: #fff;
          }
        }
      }
      .moving-item {
        .item {
          padding: 25px;
          margin-bottom: 10px;
          background-color: #fff;
          box-sizing: border-box;
          border-bottom: 1px solid #f6f6f6;
          .user-history {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0 20px;
            font-size: 16px;
            color: #95998f;
          }
          h3 {
            color: #000;
            &:hover {
              color: #175200;
              cursor: pointer;
            }
          }
          .content-items {
            color: #000;
            .user-info-card {
              display: flex;
              align-items: center;
              margin-top: 20px;
              img {
                width: 40px;
                height: 40px;
                padding-right: 15px;
              }
              span:nth-child(2) {
                font-size: 15px;
                font-weight: bold;
                color: #333;
              }
              span:nth-child(3) {
                font-size: 14px;
                color: #454545;
              }
            }
            .main-content {
              padding: 25px 0;
              div {
                font-size: 15px;
                line-height: 35px;
                &:hover {
                  opacity: 0.9;
                  cursor: pointer;
                }
              }
              button {
                padding: 0 15px;
                font-size: 14px;
                color: #175199;
                outline: none;
                background: none;
                border: none;
                cursor: pointer;
              }
            }
            .is-video {
              img {
                width: 100%;
                height: 100%;
                cursor: pointer;
              }
              .article-content {
                font-size: 15px;
                line-height: 35px;
              }
            }
          }
          .item-operating {
            display: flex;
            align-items: center;
            width: 100%;
            color: #95998f;
            font-size: 15px;
            .hide-content {
              margin-left: auto;
            }
            div {
              display: flex;
              align-items: center;
              margin-right: 20px;
              cursor: pointer;
              &:hover {
                opacity: 0.8;
              }
              .icon {
                display: inline-block;
                width: 15px;
                height: 15px;
                margin-right: 5px;
                vertical-align: middle;
                background-size: 100% 100%;
              }
            }
          }
          /* 评论 */
          .comment-cover {
            z-index: 1;
            position: relative;
            padding: 20px 10px;
            .comment-title {
              display: flex;
              justify-content: space-between;
              padding: 25px 20px;
              border-radius: 4px;
              box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.52);
              p {
                font-size: 14px;
                color: #95998f;
                cursor: pointer;
                i {
                  display: inline-block;
                  width: 16px;
                  height: 14px;
                  background-size: 100% 100%;
                }
              }
            }
            .comment-pagination {
              padding: 10px 0;
              text-align: center;
              border-radius: 4px;
              box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.52);
            }
            .comment-content {
              padding: 20px;
              box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.33);
              & > div:first-child {
                display: flex;
                align-items: center;
                justify-content: space-between;
                div {
                  display: flex;
                  align-items: center;
                  img {
                    width: 33px;
                    height: 33px;
                    margin-right: 10px;
                    cursor: pointer;
                  }
                  span {
                    font-size: 15px;
                    font-weight: bold;
                    color: #333;
                    cursor: pointer;
                  }
                }
                span {
                  font-size: 15px;
                  color: #95998f;
                }
              }
              & > div:nth-child(2) {
                margin: 10px 40px;
                padding-bottom: 10px;
                border-bottom: 1px solid #f6f6f6;
                p:first-child {
                  display: -webkit-box;
                  margin: 10px 0;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 4;
                  overflow: hidden;
                  font-size: 15px;
                  color: #000;
                }
                p:nth-child(2) {
                  display: flex;
                  align-items: center;
                  color: #95998f;
                  font-size: 14px;
                  i {
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    margin-right: 5px;
                    background-size: 100% 100%;
                    cursor: pointer;
                  }
                }
              }
              .reply-comment {
                padding: 10px 0 10px 40px;
                .child-reply-title {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  div {
                    display: flex;
                    align-items: center;
                    img {
                      width: 33px;
                      height: 33px;
                      margin-right: 10px;
                      cursor: pointer;
                    }
                    & > span {
                      font-size: 15px;
                      color: #333;
                      font-weight: bold;
                      cursor: pointer;
                    }
                    & > span:nth-child(3) {
                      margin: 0 10px;
                      font-size: 14px;
                      color: #95998f;
                      font-weight: 400;
                      cursor: default;
                    }
                  }
                  & > span {
                    font-size: 14px;
                    color: #95998f;
                  }
                }
                .content-info {
                  padding: 0 40px 10px;
                  border-bottom: 1px solid #f6f6f6;
                  p {
                    display: -webkit-box;
                    margin: 10px 0;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 30px;
                    font-size: 15px;
                    color: #000;
                  }
                  i {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                    background-size: 100% 100%;
                    cursor: pointer;
                  }
                  span {
                    font-size: 14px;
                    color: #95998f;
                  }
                }
                &:last-child {
                  border-bottom: none;
                }
              }
            }
          }
          .cover {
            position: relative;
            .cover-share {
              z-index: 99;
              position: absolute;
              top: 25px;
              left: 150px;
              text-align: center;
              font-size: 14px;
              color: #95998f;
              background-color: #fff;
              box-shadow: 0 0 10px #eaeaea;
              &:before {
                z-index: 0;
                position: absolute;
                top: -15px;
                left: 55px;
                content: "";
                width: 0;
                border: solid;
                border-color: transparent transparent #fff transparent;
                border-width: 0 10px calc(10px * 1.732);
                text-shadow: 0 0 5px #333333;
              }
              div {
                display: flex;
                align-items: center;
                padding: 10px 15px;
                font-size: 14px;
                color: #95998f;
                cursor: pointer;
                &:hover {
                  color: #6b9147;
                  background-color: rgba(0, 0, 0, 0.05);
                }
                img {
                  width: 15px;
                  height: 13px;
                  margin-right: 10px;
                }
              }
              & > img {
                width: 100px;
                height: 100px;
              }
            }
            .cover-more {
              z-index: 1;
              position: absolute;
              top: 25px;
              left: 325px;
              width: 110px;
              font-size: 14px;
              color: #95998f;
              box-sizing: border-box;
              background-color: #fff;
              box-shadow: 0 0 10px #eaeaea;
              cursor: pointer;
              &:before {
                z-index: 0;
                position: absolute;
                top: -15px;
                left: 50px;
                content: "";
                width: 0;
                border: solid;
                border-color: transparent transparent #fff transparent;
                border-width: 0 10px calc(10px * 1.732);
                text-shadow: 0 0 5px #333333;
              }
              p {
                padding: 10px 15px;
                &:hover {
                  color: #6b9147;
                  background-color: rgba(0, 0, 0, 0.05);
                }
              }
            }
          }
        }
      }
    }
    .user-right {
      width: 30%;
      height: 100%;
      .user-item {
        padding: 20px;
        border-radius: 2px;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
        & > div {
          margin: 10px 0;
          font-size: 17px;
          font-weight: bold;
          color: #333;

          i {
            display: inline-block;
            width: 17px;
            height: 17px;
            margin-right: 5px;
            vertical-align: middle;
            background-size: 100% 100%;
          }
        }

        & > p {
          display: flex;
          justify-content: space-between;
          line-height: 40px;
          font-size: 16px;
          color: #333;

          span {
            color: #6b9147;
            cursor: pointer;
          }
        }
      }
      .trademark {
        font-size: 15px;
        color: #7d8178;
        & > p:first-child {
          margin: 20px 0;
        }
      }
    }
  }
}
</style>
